import { defineComponent, ref, watch } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options = {}

    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#4E36DC', // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(126,199,255,1)', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(126,199,255,0)', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            formatter: (params) => {
              let str = params[0].name + "<br />";
                params.forEach((item) => {
                  str +=
                      `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${item.seriesName == '一楼食堂'?'#F86E4E':item.seriesName == '二楼食堂'?'rgba(10,219,250,1)':'#65db89'};"></span>${item.seriesName}:${item.value}<br />`
                });
                return str;
            },
          },
          legend: {
            itemWidth: 14,
            itemHeight: 14,
            icon: 'rect',
            right: '5%',
            top: '4%',
            itemGap: 20, //每条图例的距离
            data: [
              {
                name: '一楼食堂',
                textStyle: {
                  color: '#F86E4E',
                  fontSize: 14
                },
              },
              {
                name: '二楼食堂',
                textStyle: {
                  color: 'rgba(10,219,250,1)',
                  fontSize: 14
                },
              },
              {
                name: '三楼食堂',
                textStyle: {
                  color: '#65db89',
                  fontSize: 14
                },
              },
            ],
          },
          grid: {
            top: '18%',
            left: '10%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: '#233653',
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: '##E06148',
                  padding: 16,
                  fontSize: 14,
                },
                formatter: function (data) {
                  return data;
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#192a44',
                },
              },
              axisTick: {
                show: false,
              },
              data: val.xLabel,
            },
          ],
          yAxis: [
            {
              name: '单位：人次',
              nameTextStyle: {
                color: '#7ec7ff',
                fontSize: 16,
                padding: 10,
              },
              min: 0,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#192a44',
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#233653',
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#7ec7ff',
                  padding: 16,
                },
                formatter: function (value) {
                  if (value === 0) {
                    return value;
                  }
                  return value;
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '一楼食堂',
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              smooth: true,
              lineStyle: {
                normal: {
                  width: 3,
                  color: '#F86E4E', // 线条颜色
                },
                borderColor: '#F86E4E',
              },
              itemStyle: {
                color: '#F86E4E',
                borderColor: '#F86E4E',
                borderWidth: 1,
              },
              tooltip: {
                show: true,
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#E06148',
                      },
                      {
                        offset: 1,
                        color: '#3CA1EC',
                      },
                      {
                        offset: 0,
                        color: '#E06148',
                      },
                    ],
                    false
                  ),
                  shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: val.goToSchool,
            },
            {
              name: '二楼食堂',
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              smooth: true,
              lineStyle: {
                normal: {
                  width: 3,
                  color: 'rgba(10,219,250,1)', // 线条颜色
                },
                borderColor: 'rgba(10,219,250,1)',
              },
              itemStyle: {
                color: 'rgba(10,219,250,1)',
                borderColor: 'rgba(10,219,250,1)',
                borderWidth: 1,
              },
              tooltip: {
                show: true,
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(10,219,250,.3)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(10,219,250, 0)',
                      },
                      {
                        offset: 0,
                        color: 'rgba(10,219,250,.3)',
                      },
                    ],
                    false
                  ),
                  shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: val.goOutSchool,
            },
            {
              name: '三楼食堂',
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              smooth: true,
              lineStyle: {
                normal: {
                  width: 3,
                  color: '#65db89', // 线条颜色
                },
                borderColor: '#65db89',
              },
              itemStyle: {
                color: '#65db89',
                borderColor: '#65db89',
                borderWidth: 1,
              },
              tooltip: {
                show: true,
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(31,223,89,.3)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(31,223,89, 0)',
                      },
                      {
                        offset: 0,
                        color: 'rgba(31,223,89,.3)',
                      },
                    ],
                    false
                  ),
                  shadowColor: 'rgba(31,223,89, 0.5)', //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: val.goOutSchool2,
            },
          ],
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "340px"
      const width = "580px"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

